<script lang="ts" setup>
import OneSelectTag from '@/component/content/selectTag/OneSelectTag.vue'
import { getAbilityList, getAllAbilityTag, getAllAbilityTotal } from '@/api/content/ability'
import { useRouter } from 'vue-router'
import { list, allTag, totalNum } from './index'
import { formatNumber } from '@/utils/content/number'
import { ArrowRight } from '@element-plus/icons-vue'

const router = useRouter()
const currentPage = ref(1)
const pageSize = ref(12)
const total = ref(0)
const abilityTotal = ref(0)
const monthTotal = ref(0)
const todayTotal = ref(0)
const abilityList = ref([])
const abilityClassification = ref([])
const abilityGranularity = ref([])
const abilityOutput = ref([])
const hotMain = ref([])
const hotSub = ref([])
const searchform = ref({
  abilityName: '',
  abilityClassificationId: 'all',
  abilityOutputId: 'all',
  hotMainId: 'all',
  hotSubId: 'all'
})

const getAbilityLists = async (page = currentPage.value) => {
  // console.log(list)
  const ret = list
  // const ret = await getAbilityList({
  //   abilityName: searchform.value.abilityName,
  //   abilityClassification: searchform.value.abilityClassificationId === 'all' ? '' : searchform.value.abilityClassificationId,
  //   abilityOutput: searchform.value.abilityOutputId === 'all' ? [] : [searchform.value.abilityOutputId],
  //   abilitySummary: '',
  //   abilityStatus: '',
  //   isSuggest: '',
  //   abilityDescription: '',
  //   orders: 0,
  //   pageSize: pageSize.value,
  //   currentPage: page
  // })

  if (ret.retCode === '000000') {
    total.value = ret.pageInfo.total
    abilityList.value = ret.pageInfo.list
  }
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getAbilityLists()
}

const handleKV = () => {
  return (item) => {
    return {
      label: item.tagName,
      value: item.tagId
    }
  }
}

const goDetail = (id: string) => {
  // console.log(22);
  // window.open(`/ability/${id}`)
  router.push(`/ability/${id}`)
}
onMounted(async () => {
  getAbilityLists()
  const tags = allTag
  // const tags = await getAllAbilityTag()
  if (tags.retCode === '000000') {
    abilityClassification.value = tags.allTag.abilityClassification
    abilityClassification.value = abilityClassification.value.map(handleKV())
    abilityClassification.value.unshift({ label: '全部', value: 'all' })

    abilityGranularity.value = tags.allTag.abilityGranularity
    abilityGranularity.value = abilityGranularity.value.map(handleKV())
    abilityGranularity.value.unshift({ label: '全部', value: 'all' })

    abilityOutput.value = tags.allTag.abilityOutput
    abilityOutput.value = abilityOutput.value.map(handleKV())
    abilityOutput.value.unshift({ label: '全部', value: 'all' })

    hotMain.value = tags.allTag.hotMain
    hotMain.value = hotMain.value.map(handleKV())
    hotMain.value.unshift({ label: '全部', value: 'all' })

    hotSub.value = tags.allTag.hotSub
    hotSub.value = hotSub.value.map(handleKV())
    hotSub.value.unshift({ label: '全部', value: 'all' })
  }

  // const totals = await getAllAbilityTotal()
  const totals = totalNum

  if (totals.retCode === '000000') {
    abilityTotal.value = totals.abilityTotal
    monthTotal.value = totals.monthTotal
    todayTotal.value = totals.todayTotal
  }
})
</script>

<template>
  <div class="ability-container">
    <div class="ability-banner">
      <div class="mar-center">
        <h3>能力地图</h3>
        <div class="ability-statistics">
          <div class="ability-st-item">
            <img src="@/assets/image/ability/a0.png" alt="" />
            <div class="ability-name-and-num">
              <div class="ability-name">全部能力</div>
              <div class="ability-num">
                <span>{{ abilityTotal }}</span>
                <span>个</span>
              </div>
            </div>
          </div>
<!--          <div class="ability-st-item">-->
<!--            <img src="@/assets/image/ability/a1.png" alt="" />-->
<!--            <div class="ability-name-and-num">-->
<!--              <div class="ability-name">本月新增</div>-->
<!--              <div class="ability-num">-->
<!--                <span>{{ monthTotal }}</span>-->
<!--                <span>个</span>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
          <div class="ability-st-item">
            <img src="@/assets/image/ability/a1.png" alt="" />
            <div class="ability-name-and-num">
              <div class="ability-name">调用量</div>
              <div class="ability-num">
                <span>{{ formatNumber(todayTotal)}}</span>
                <span>次</span>
              </div>
            </div>
          </div>
        </div>
        <div class="ability-search-container">
          <input type="text" placeholder="搜索能力地图" v-model="searchform.abilityName" />
          <button type="button" @click="getAbilityList(1)">搜索</button>
        </div>
      </div>
    </div>

    <div class="ability-content">
      <div class="mar-center">
        <div class="search-container">
          <el-form label-width="110px">
            <el-form-item label="能力分类:" v-if="abilityClassification.length !== 0">
              <OneSelectTag v-model="searchform.abilityClassificationId" :list="abilityClassification" @change="getAbilityList(1)" />
            </el-form-item>
            <el-form-item label="细分领域：" v-if="abilityGranularity.length !== 0">
              <OneSelectTag v-model="searchform.hotSubId" :list="hotSub" @change="getAbilityList(1)" />
            </el-form-item>
            <el-form-item label="能力交互方式:" v-if="abilityGranularity.length !== 0">
              <OneSelectTag v-model="searchform.abilityOutputId" :list="abilityOutput" @change="getAbilityList(1)" />
            </el-form-item>
            <el-form-item label="管理标签:" v-if="abilityGranularity.length !== 0">
              <OneSelectTag v-model="searchform.hotMainId" :list="hotMain" @change="getAbilityList(1)" />
            </el-form-item>

          </el-form>
        </div>

        <div v-if="abilityList.length === 0">
          <el-empty description="暂无数据"></el-empty>
        </div>
        <div v-else>
          <div class="clearfix ability-items-container">
            <div class="ability-item" v-for="item in abilityList" @click="goDetail(item.abilityId)" :key="item.abilityId">
              <div class="ability-item-name">{{ item.name ? item.name.slice(0, 20) : '' }}</div>
              <div class="ability-item-intro" v-html="item.describe ? item.describe.slice(0, 46)+'...' : ''"></div>
              <div class="ability-provider">提供方：{{ item.provider }}</div>
              <div class="ability-bottom-area">
                <a :href="'/ability/' + item.abilityId"
                >了解详情
                  <el-icon class="ability-detail-arrow"><ArrowRight /></el-icon></a>
                <span>{{ item.code }}</span>
              </div>

            </div>
          </div>
          <div class="pagination-area">
            <el-pagination
              class="justify-center"
              :current-page="currentPage"
              @current-change="handleCurrentChange"
              :page-size="pageSize"
              layout="total, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.mar-center {
  width: 1200px;
  margin: 0 auto;
  // overflow: hidden;
}

.ability-container {
  overflow: hidden;

  .ability-banner {
    width: 100%;
    height: 320px;
    background: url('@/assets/image/ability/ability-banner.png') no-repeat center;

    h3 {
      font-size: 42px;
      font-family: MiSans-Regular, MiSans;
      font-weight: 400;
      color: #1d263d;
      line-height: 56px;
      padding-top: 60px;
    }

    .ability-statistics {
      margin-top: 26px;
      overflow: hidden;

      .ability-st-item {
        margin-right: 46px;
        overflow: hidden;
        display: inline-block;

        img {
          width: 50px;
          height: 50px;
          margin-right: 16px;
          float: left;
        }

        .ability-name-and-num {
          float: left;

          .ability-name {
            font-size: 16px;
            font-family: MiSans-Regular, MiSans;
            font-weight: 400;
            color: #383e47;
            line-height: 21px;
          }

          .ability-num {
            span:nth-child(1) {
              font-size: 24px;
              font-weight: bold;
            }

            span:nth-child(2) {
              font-size: 14px;
            }
          }
        }
      }
    }

    .ability-search-container {
      margin-top: 68px;
      display: flex;
      align-items: center;
      width: 389px;
      height: 36px;
      //border: 1px solid #ccc;
      border-radius: 5px;
      overflow: hidden;

      input {
        width: 389px;
        height: 36px;
        //padding-left: 16px;
        border: none;
        padding: 10px;
        font-size: 14px;
        outline: none;

        &::placeholder {
          font-size: 14px;
          color: #b6b6b8;
          line-height: 19px;
        }
      }

      button {
        width: 64px;
        height: 36px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 0 5px 5px 0;
        padding: 0px 15px;
        cursor: pointer;
        line-height: 36px;
      }

      button:hover {
        background-color: #0056b3;
      }
    }
  }

  .ability-content {
    background: #fff;
    overflow: hidden;

    .ability-items-container {
      background: #fff;
      margin-top: 42px;
      padding-bottom: 32px;
      // overflow: hidden;
      .icon {
        font-size: 14px;
      }

      .ability-item {
        width: 389px;
        height: 160px;
        background: #ffffff url('@/assets/image/ability/unselected.png') no-repeat 220px 80px/40% 40%;
        box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08);
        border-radius: 4px 4px 4px 4px;
        padding: 16px;
        cursor: pointer;
        position: relative;
        float: left;
        margin-right: 16px;
        margin-bottom: 16px;

        .ability-item-name {
          height: 21px;
          font-size: 16px;
          font-family: MiSans-Regular, MiSans;
          font-weight: 400;
          color: #1d263d;
          line-height: 21px;
        }

        .ability-item-intro {
          margin-top: 5px;
          width: 357px;
          font-size: 14px;
          font-family: MiSans-Regular, MiSans;
          font-weight: 400;
          color: #747882;
          line-height: 19px;
          word-break: break-all;
          overflow: hidden;
        }
        .ability-provider{
          margin-top: 16px;
          font-size: 14px;
          font-family: MiSans-Regular, MiSans-Regular;
          font-weight: normal;
          color: #000000;
          position: absolute;
          bottom: 50px;
        }

        .ability-bottom-area{
          position: absolute;
          left: 16px;
          right: 16px;
          bottom: 16px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .ability-detail-arrow{
            vertical-align: sub;
            font-size: 16px;
          }
          a {

            font-size: 14px;
            font-family: MiSans-Regular, MiSans;
            font-weight: 400;
            color: #b6b6b8;
            line-height: 19px;
            vertical-align: middle;

            span {
              font-size: 18px;
              height: 18px;
              margin-left: 9px;
              vertical-align: middle;
            }
          }
        }

      }

      .ability-item:nth-child(3n) {
        margin-right: 0;
      }

      .ability-item:hover {
        background: #ffffff url('@/assets/image/ability/selected.png') no-repeat 220px 80px/40% 40%;

        .ability-item-name {
          color: #3e8efd;
        }

        a,span {
          color: #3e8efd;
        }
      }
    }

    .pagination-area {
      margin-top: 40px;
      margin-bottom: 90px;
      text-align: center;
    }
  }
}

.search-container {
  margin-top: 26px;

  .el-form-item {
    margin-bottom: 0px;
  }

  ::v-deep() {
    .el-form-item__label {
      font-size: 14px;
      font-family: MiSans-Regular, MiSans;
      font-weight: 600;
      color: #383e47;
    }
  }
}
</style>
